<!--<template>
  <div>
  <el-row :gutter="20">
    <el-col  :span="2">
      <img style="cursor: pointer" @click="handleClick({menuId:'',parentId:parentShow.parentId})" :src="parentShow.menuLogo" class="img_top">
    </el-col>
    <el-col :span="14">
      <span style="cursor: pointer" @click="handleClick({menuId:'',parentId:parentShow.parentId})" class="tile_top" v-html="parentShow.menuName"></span>
    </el-col>
    <el-col  :span="4">
      <div class="button_return" @click="handleClick({menuId:'',parentId:parentShow.parentId})"></div>
    </el-col>
    <el-col :span="4">
      <div class="button_index" @click="handleIndex()"></div>
    </el-col>
  </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        &lt;!&ndash;首页 公司选择&ndash;&gt;
        <template v-if="parentMenuType == null || parentMenuType == ''">
          <div class="container" >
            <div class="box" v-for="(item, i) in showData" @click="handleClick(item)" :key="item.menuId"  >
              <img class="g" :src="item.menuLogo">
              <p class="tile" v-text="item.menuName"></p>
            </div>
          </div>
        </template>
      </el-col>
      <el-col :span="24">
        &lt;!&ndash;公司或产品介绍 &ndash;&gt;
        <template v-if="parentMenuType == 'M'">
          <div class="container_m" >
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="box_m1" @click="handleClick({menuId:'',parentId:parentShow.parentId})" >
                  <img class="g_m" :src="parentShow.menuLogo">
                  <span class="tile_m" v-text="parentShow.menuName"></span>
                </div>
              </el-col>
              <el-col :span="18">
                <div class="box_m2" v-for="(item, i) in showData" @click="item.menuType == 'F'? handleView(item) : handleClick(item)" :key="item.menuId"  >
                  <img class="g" :src="item.menuLogo">
                  <span class="tile" v-text="item.menuName"></span>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-col>
      <el-col :span="24">
        &lt;!&ndash;业务介绍 &ndash;&gt;
        <template v-if="parentMenuType == 'C'">
          <div class="container_m3" >
            <el-row :gutter="80">
              <el-col :span="24">
                <el-carousel :interval="4000" type="card" width="6vw" :autoplay="false"  height="85vh;margin-left:10vw" arrow="always" indicator-position="outside">
                  <el-carousel-item v-for="(item, i) in showData" :key="item.menuId"  >
                    <div class="box_m3" @click="handleClick(item)" >
                                          <span class="tile_m3"
                                                :style="{
                                                'font-size':item.menuName.toString().length<=2?'8vw':
                                                '5vw'
                                                }"
                                                v-text="item.menuName"></span>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-col>

    </el-row>
  </div>
</template>-->
<!--<template>
  <div id="app" class="app">
    &lt;!&ndash; 返回 主页 &ndash;&gt;
    <el-row v-if="parentMenuType != null && parentMenuType != ''" :gutter="20">
      <el-col :span="2">
        <img style="cursor: pointer" @click="handleClick({menuId:'', parentId: parentShow.parentId})" :src="parentShow.menuLogo" class="img_top">
      </el-col>
      <el-col :span="14">
        <span style="cursor: pointer" @click="handleClick({menuId:'', parentId: parentShow.parentId})" class="tile_top" v-html="parentShow.menuName"></span>
      </el-col>
      <el-col :span="4">
        <div class="button_return" @click="handleClick({menuId:'', parentId: parentShow.parentId})"></div>
      </el-col>
      <el-col :span="4">
        <div class="button_index" @click="handleIndex()"></div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        &lt;!&ndash; 首页 公司选择 &ndash;&gt;
        <div v-if="parentMenuType == null || parentMenuType == ''" class="container">
          <div class="box" v-for="(item, i) in showData" @click="handleClick(item)" :key="item.menuId">
            <img class="g" :src="item.menuLogo">
            <p class="tile" v-text="item.menuName"></p>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        &lt;!&ndash; 公司或产品介绍 &ndash;&gt;
        <div v-if="parentMenuType == 'M'" class="container_m">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="box_m1" @click="handleClick({menuId:'', parentId: parentShow.parentId})">
                <img class="g_m" :src="parentShow.menuLogo">
                <span class="tile_m" v-text="parentShow.menuName"></span>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="box_m2" v-for="(item, i) in showData" @click="item.menuType == 'F'? handleView(item) : handleClick(item)" :key="item.menuId">
                <img class="g" :src="item.menuLogo">
                <span class="tile" v-text="item.menuName"></span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="24">
        &lt;!&ndash; 业务介绍 &ndash;&gt;
        <div v-if="parentMenuType == 'C'" class="container_m3">
          <el-row :gutter="80">
            <el-col :span="24">
              <el-carousel :interval="4000" type="card" width="6vw" :autoplay="false" height="85vh; margin-left:10vw" arrow="always" indicator-position="outside">
                <el-carousel-item v-for="(item, i) in showData" :key="item.menuId">
                  <div class="box_m3" @click="handleClick(item)">
                    <span class="tile_m3"
                          :style="{
                            'font-size': item.menuName.toString().length <= 2 ? '8vw' : '5vw'
                          }"
                          v-text="item.menuName"></span>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>-->
<template>
  <div id="app" class="app">
    <!-- 顶部导航栏：返回 和 主页 按钮固定在右上角 -->
    <div class="top-nav" v-if="parentMenuType !== null && parentMenuType !== ''">
      <div class="logo-and-title">
        <img
          style="cursor: pointer"
          @click="handleClick({ menuId: '', parentId: parentShow.parentId })"
          :src="fixImgUrl(parentShow.menuLogo)"
          class="img_top"
        />
        <span
          style="cursor: pointer"
          @click="handleClick({ menuId: '', parentId: parentShow.parentId })"
          class="tile_top"
          v-html="parentShow.menuName"
        ></span>
      </div>

      <div class="nav-buttons">
        <div
          class="button_return"
          @click="handleClick({ menuId: '', parentId: parentShow.parentId })"
        ></div>
        <div class="button_index" @click="handleIndex()"></div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <el-row :gutter="20" class="main-content">
      <!-- 首页 - 公司选择（改为轮播图） -->
      <el-col :span="24" v-if="parentMenuType == null || parentMenuType == ''">
        <div class="container_home_carousel">
          <el-row>
            <el-col :span="20" :offset="2">
              <el-carousel
                :interval="5000"
                type="card"
                height="70vh"
                :autoplay="true"
                arrow="always"
                indicator-position="outside"
              >
                <el-carousel-item
                  v-for="item in showData"
                  :key="item.menuId"
                  @click.native="handleClick(item)"
                >
                  <div class="box_home_carousel">
                    <img class="g_home_carousel" :src="fixImgUrl(item.menuLogo)" />
                    <span class="tile_home_carousel">{{ item.menuName }}</span>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 公司或产品介绍 (M) -->
      <el-col :span="24" v-if="parentMenuType == 'M'">
        <div class="container_m">
          <!-- 轮播图：全宽居中 -->
          <el-row>
            <el-col :span="20" :offset="2">
              <el-carousel
                :interval="4000"
                type="card"
                height="70vh"
                :autoplay="true"
                arrow="always"
                indicator-position="outside"
              >
                <el-carousel-item
                  v-for="item in showData"
                  :key="item.menuId"
                  @click.native="item.menuType === 'F' ? handleView(item) : handleClick(item)"
                >
                  <div class="box_m3_carousel">
                    <img class="g_carousel" :src="fixImgUrl(item.menuLogo)" />
                    <span class="tile_carousel">{{ item.menuName }}</span>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 业务介绍 (C) -->
      <el-col :span="24" v-if="parentMenuType == 'C'">
        <div class="container_m3">
          <el-row :gutter="80">
            <el-col  :span="20" :offset="2">
              <el-carousel
                :interval="4000"
                type="card"
                width="60vw"
                :autoplay="false"
                height="85vh"
                arrow="always"
                indicator-position="outside"
                style="margin-left: 10vw"
              >
                <el-carousel-item
                  v-for="(item, i) in showData"
                  :key="item.menuId"
                >
                  <div class="box_m3" @click="handleClick(item)">
                    <span
                      class="tile_m3"
                      :style="{
                        'font-size': item.menuName.toString().length <= 2 ? '8vw' : '5vw'
                      }"
                      v-text="item.menuName"
                    ></span>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from 'axios';
import { showBi_show } from "@/api/bi/bi_show";

export default {
  data() {
    return {
      showData: [],
      parentMenuType: '',
      parentShow: {
        menuId: undefined,
        menuName: undefined,
        parentId: undefined,
        menuLogo: undefined,
        menuTitle: undefined,
        showUrl: undefined,
        fileUrl: undefined,
        isShowParent: undefined,
      },
    };
  },
  created() {
    this.handleClick({ menuId: '', parentId: 0, menuType: '' });
  },
  methods: {
    fixImgUrl(path) {
      if (!path) return '';
      // 如果已经是完整 URL，直接返回
      if (/^https?:\/\//.test(path)) {
        return path;
      }
      // 否则拼接 base API
      return process.env.VUE_APP_BASE_API + path;
    },
    /* 点击下一页 */
    handleClick(item) {
      if (item.menuId === '' || ['', 'M', 'C'].includes(item.menuType)) {
        showBi_show({ menuId: item.menuId, parentId: item.parentId }).then(response => {
          this.showData = response.showData;
          this.parentMenuType = response.parentMenuType;
          this.parentShow = response.parentShow;
        }).catch((error) => {
          console.error('请求失败:', error);
          this.$message.error('请求失败，请重试');
        });
      } else if (item.menuType === 'F') {
        this.handleView(item);
      } else {
        this.$message({
          message: '还没上传可播放的文件，请检查播放目录',
          type: 'success',
        });
      }
    },

    /* 返回首页 */
    handleIndex() {
      location.reload();
    },

    /* 预览 */
    handleView(item) {
      let url = item.showUrl || item.fileUrl || '/404';
      window.open(url, '_blank');
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
// ========== 全局样式 ==========
html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: url('./img.png') no-repeat center center/cover;
  background-attachment: fixed;
  color: #e2e8f0;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  overflow-x: hidden;
}

.app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

// ========== 顶部导航栏 ==========
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5vh 2vw;
}

.logo-and-title {
  display: flex;
  align-items: center;
}

.nav-buttons {
  display: flex;
  gap: 16px; /* 按钮之间的间距 */
  margin-left: auto; /* 推到最右边 */
}

.img_top {
  width: 5.5vw;
  height: 5.5vw;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid #3b82f6;
}

.img_top:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.tile_top {
  font-size: 3.8vh;
  font-weight: 600;
  color: #ffffff;
  margin-left: 1vw;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
}

.button_return,
.button_index {
  width: 14vw;
  height: 4.2vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  margin-top: 1.2vh;
}

.button_return {
  background-image: url('./return.png');
}

.button_index {
  background-image: url('./index.png');
}

.button_return:hover,
.button_index:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

// ========== 主容器布局 ==========
.el-row {
  flex: 1;
  display: flex;
  flex-direction: column;
}

// ========== 首页轮播图样式 ==========
.container_home_carousel {
  padding: 2vh 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.box_home_carousel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border-radius: 20px;
  padding: 2vh 1vw;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(59, 130, 246, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
}

.box_home_carousel:hover {
  transform: scale(1.03);
  background: rgba(29, 78, 216, 0.3);
  border-color: #60a5fa;
}

.g_home_carousel {
  width: 22vw;
  height: 22vw;
  object-fit: contain;
  margin-bottom: 2vh;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

.tile_home_carousel {
  color: #ffffff;
  font-size: 5.6vh;
  font-weight: 700;
  text-align: center;
  max-width: 90%;
  word-break: break-word;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

// ========== 公司/产品介绍 (M) ==========
.container_m {
  padding: 2vh 4vw;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.box_m1 {
  width: 18vw;
  height: 24vw;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 20px;
  border: 1px solid rgba(124, 58, 237, 0.5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 auto;
}

.box_m1:hover {
  transform: scale(1.05);
  border-color: #a78bfa;
}

.g_m {
  width: 10vw;
  height: 10vw;
  margin: 2vw auto 1vw;
  border-radius: 50%;
  border: 2px solid #c4b5fd;
  object-fit: cover;
}

.tile_m {
  font-size: 2.2vh;
  font-weight: 500;
  color: #f1f5f9;
  display: block;
  margin: 0 0 1vw;
}

// ========== 轮播图样式 (M 和 C) ==========
.el-carousel {
  margin-top: 2vh !important;
}

.el-carousel__container {
  height: 60vh !important;
}

.el-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

// M 类型轮播
.box_m3_carousel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 20px;
  padding: 2vh 1vw;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
}

.box_m3_carousel:hover {
  transform: scale(1.05);
  background: rgba(29, 78, 216, 0.3);
  border-color: #60a5fa;
}

.g_carousel {
  width: 20vw;
  height: 20vw;
  object-fit: contain;
  margin-bottom: 1.5vh;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.tile_carousel {
  color: #ffffff;
  font-size: 5.4vh;
  font-weight: 600;
  text-align: center;
  max-width: 90%;
  word-break: break-word;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

// C 类型轮播（大标题）
.box_m3 {
  background: linear-gradient(135deg, #1e40af, #1e3a8a);
  border: 1px solid rgba(59, 130, 246, 0.5);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.box_m3:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 50px rgba(30, 64, 175, 0.5);
}

.tile_m3 {
  font-size: clamp(2.5vw, 8vw, 4vw);
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 1.3;
  padding: 0 2vw;
}

// ========== 轮播箭头优化 ==========
.el-carousel__arrow {
  width: 50px !important;
  height: 50px !important;
  background-color: rgba(15, 23, 42, 0.8) !important;
  border: 2px solid #60a5fa !important;
  border-radius: 50% !important;
  font-size: 24px !important;
  opacity: 0.9 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.el-carousel__arrow:hover {
  background-color: #3b82f6 !important;
  transform: scale(1.1);
}

.el-carousel__arrow i {
  font-weight: bold;
}
</style>
/*axios
.get('/bi/bi_show/list', {
params: {menuId: item.menuId,
parentId: item.parentId,},

})
.then((response) => {
const data = response.data;
this.showData = data.showData;
this.parentMenuType = data.parentMenuType;

// 避免直接替换整个 parentShow 对象，使用 Vue.set 更新属性
Object.keys(data.parentShow).forEach((key) => {
this.$set(this.parentShow, key, data.parentShow[key]);
});
})
.catch((error) => {
console.error('请求失败:', error);
this.$message.error('请求失败，请重试');
});*/

<!--<script src="../static/js/jquery.min.js" ></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" ></script>
<script src="../static/ajax/libs/validate/jquery.validate.extend.js" ></script>
<script src="../static/ajax/libs/layer/layer.min.js" ></script>
&lt;!&ndash; 引入组件库 &ndash;&gt;
<script src="https://unpkg.com/element-ui/lib/index.js" ></script>
<script>
import axios from 'axios';
import { listBi_show } from "@/api/bi/bi_show";


export default {
  data() {
    return {
      showData: [],
      parentMenuType: '',
      parentShow: {
        menuId: undefined,
        menuName: undefined,
        parentId: undefined,
        menuLogo: undefined,
        menuTitle: undefined,
        showUrl: undefined,
        fileUrl: undefined,
        isShowParent: undefined,
      },
    };
  },
  created() {
    this.handleClick({ menuId: '', parentId: 0, menuType: '' });
  },
  methods: {
    /* 点击下一页 */
    handleClick(item) {
      // 判断是否跳转下一级菜单
      if (
        item.menuId === '' ||
        ['', 'M', 'C'].includes(item.menuType)
      ) {
         console.log('item.menuType', item.menuType);
        listBi_show({menuId: item.menuId,
                           parentId: item.parentId,}).then(response => {



          const data = response.data;
          this.showData = data.showData;

          console.log("this.showData", this.showData);
          console.log("response",response);
          console.log("this.parentMenuType", this.parentMenuType);
          console.log("this.parentShow",this.parentShow);

          this.parentMenuType = data.parentMenuType;

          // 避免直接替换整个 parentShow 对象，使用 Vue.set 更新属性
          const parentShow = data.parentShow || {}; // 默认为空对象
          Object.keys(parentShow).forEach((key) => {
            this.$set(this.parentShow, key, data.parentShow[key]);
          });
        })
        .catch((error) => {
          console.error('请求失败:', error);
          this.$message.error('请求失败，请重试');
        })

      } else if (item.menuType === 'F') {
        console.log('item.menuType', item.menuType);
        this.handleView(item);
      } else {
        this.$message({
          message: '还没上传可播放的文件，请检查播放目录',
          type: 'success',
        });
      }
    },
    portBi_show(data) {
      return axios.post('/api/bi/bi_show/portBi_show', data);
    },
    /* 返回首页 */
    handleIndex() {
      location.reload();
    },

    /* 预览 */
    handleView(item) {
      let url = item.showUrl || item.fileUrl || '/404';
      window.open(url, '_blank');
    },
  },
};
</script>-->
